小闭环项目的技术栈确定
经过前期的需求分析、竞品分析和技术方案对比，小闭环项目（知识付费首页）的技术栈最终确定如下。
前端技术栈
| 类别 | 选型 | 版本 | 选型理由 |
|---|---|---|---|
| 框架 | Vue 3 | ^3.4 | 主流方案，Composition API |
| 语言 | TypeScript | ^5.3 | 类型安全，提升代码质量 |
| 构建工具 | Vite | ^5.0 | 快速HMR，开发体验好 |
| 路由 | Vue Router | ^4.3 | 官方方案，SPA路由管理 |
| 状态管理 | Pinia | ^2.1 | 官方推荐，比Vuex更简洁 |
| HTTP请求 | Axios | ^1.6 | 拦截器支持，功能完善 |
| CSS方案 | UnoCSS | 最新 | 原子化CSS，灵活可定制 |
为什么选UnoCSS而不是UI组件库
首页项目需要独特的视觉风格和灵活的布局，传统UI组件库（如Element Plus）的默认样式会限制设计自由度。UnoCSS作为原子化CSS框架，可以从零构建任意设计，同时保持代码的可维护性。
服务端技术栈
| 类别 | 选型 | 选型理由 |
|---|---|---|
| 运行时 | Node.js (LTS) | 前端工程师友好 |
| 框架 | NestJS | TypeScript原生，模块化架构 |
| 数据库 | MySQL | 关系型数据，成熟稳定 |
| ORM | TypeORM | TypeScript支持好，装饰器风格 |
| 缓存 | Redis | 热点数据缓存 |
开发工具链
| 工具 | 用途 |
|---|---|
| ESLint + Prettier | 代码规范和格式化 |
| Husky + lint-staged | Git提交时自动检查 |
| Vitest | 单元测试 |
| Vue Test Utils | 组件测试 |
项目结构
project-root/
├── client/ # 前端项目
│ ├── src/
│ │ ├── api/ # API请求
│ │ ├── assets/ # 静态资源
│ │ ├── components/# 公共组件
│ │ ├── composables/# 组合式函数
│ │ ├── layouts/ # 布局组件
│ │ ├── pages/ # 页面组件
│ │ ├── router/ # 路由配置
│ │ ├── stores/ # Pinia状态
│ │ ├── styles/ # 全局样式
│ │ ├── types/ # 类型定义
│ │ └── utils/ # 工具函数
│ └── vite.config.ts
├── server/ # 服务端项目
│ ├── src/
│ │ ├── modules/ # 业务模块
│ │ ├── common/ # 公共模块
│ │ └── config/ # 配置
│ └── nest-cli.json
└── package.json
text
这种技术栈组合兼顾了学习价值（覆盖主流技术方案）和实战价值（企业级项目架构）。
↑